<template>
	<m-table @onSelect="onSelected" name="admin-order/order-by-state/1" :action="action" :search="search" :params="params" ref="table">
		<template slot="top">
			<el-button type="success" icon="el-icon-circle-plus-outline" @click="exportOrder">导出订单</el-button>
		</template>
		<el-table-column label="下单人" prop="clientName" width="140" />

		<el-table-column label="手机号" prop="clientPhone" width="140" />

		<el-table-column label="所属商户" prop="storeName" width="140" />

		<el-table-column label="订单金额" prop="orderPrice" width="140" />

		<el-table-column label="实际付款" prop="payPrice" width="140" />

		<el-table-column label="优惠金额" prop="couponPrice" width="140" />

		<el-table-column label="收货地址" width="220">
			<template slot-scope="scope">
				{{ scope.row.address.province }}{{ scope.row.address.city }}{{ scope.row.address.region }}
				<br />
				{{ scope.row.address.detail }}
			</template>
		</el-table-column>

		<el-table-column label="商品信息" width="220">
			<template slot-scope="scope">
				<el-tag type="danger" v-for="(item, index) in scope.row.goods" :key="index" style="margin: 0 10px 10px 0">
					{{ item.goodsName }} x {{ item.number }}
				</el-tag>
			</template>
		</el-table-column>

		<el-table-column label="订单状态" width="140">
			<template slot-scope="scope">
				{{ getOrderState(scope.row.orderState) }}
			</template>
		</el-table-column>

		<el-table-column label="订单备注" prop="memo" width="140" />

		<el-table-column label="付款时间" prop="payTime" width="220" />

		<el-table-column label="到货时间" prop="expectTime" width="220" />

		<el-table-column label="下单时间" prop="created" width="220" />

		<el-table-column label="操作" width="190" fixed="right">
			<template slot-scope="scope">
				<el-button type="success" size="mini" @click="success(scope.row)">通过</el-button>
				<el-button type="danger" size="mini" @click="fail(scope.row)">驳回</el-button>
			</template>
		</el-table-column>
	</m-table>
</template>

<script>
import request from '@/utils/request';
import { orderState } from '@/config/account';
export default {
	data() {
		return {
			idList: [],
			orderState: orderState,
			search: [
				{ icon: 'el-icon-mobile', type: 'like', name: 'y.name', label: '用户姓名', span: 4, value: '' },
				{ icon: 'el-icon-mobile', type: 'like', name: 'y.phone', label: '联系方式', span: 4, value: '' },
				{ icon: 'el-icon-mobile', type: 'like', name: 'z.name', label: '商户名称', span: 4, value: '' },
			],
			action: { remove: false, edit: false, add: false, export: false },
			params: [
				{ name: 'id', value: '', hide: true },
				{ name: 'name', value: '', label: '姓名', type: 'string' },
				{ name: 'phone', value: '', label: '手机号', type: 'string' },
				{ name: 'pwd', value: '', label: '登录密码', type: 'string' },
				{ name: 'storeId', value: '', label: '所属商户', type: 'apiSelect', url: 'admin-store/name' },
			],
		};
	},
	methods: {
		getOrderState(e) {
			return this.orderState.find((x) => x.id == e).name || '未知';
		},
		async success(e) {
			const res = await request.post(`admin-order/valid-order/${e.id}/true`);
			this.$refs.table.reload();
		},
		async fail(e) {
			const res = await request.post(`admin-order/valid-order/${e.id}/false`);
			this.$refs.table.reload();
		},
		onSelected(e) {
			if (e != null) this.idList = e.map((x) => x.id);
		},
		async exportOrder() {
			if (this.idList.length == 0) {
				this.$message.error('请选择需要导出的订单');
				return;
			}

			const res = await request({
				method: 'post',
				url: 'admin-order/export-excel',
				data: { orderIds: this.idList },
				responseType: 'blob',
			});

			const a = document.createElement('a');

			a.href = URL.createObjectURL(res);

			// 设置下载文件名
			a.setAttribute('download', '出货单.xlsx');

			document.body.appendChild(a);

			a.click();

			document.body.removeChild(a);

			this.$message.success('导出成功')
		},
	},
};
</script>